<template>
  <div style="display: flex">
    <div style="flex: 3"></div>
    <div style="flex: 4">
      <h2 class="center">{{ title }}</h2>
      <!-- <div
        v-for="(segment, index) in parsedContent"
        :key="index"
        class="center"
      >
        <template v-if="segment.type === 'text'">
          <p>{{ segment.content }}</p>
        </template>
        <template v-else-if="segment.type === 'image'">
          <img :src="segment.url" alt="image" style="max-width: 700px" />
        </template>
      </div> -->
      <div class="center">
        <!-- 在这里解析content，content是html片段 -->
        <div v-html="content"></div>
      </div>
      <div class="right-side">
        <div v-if="author.avatar" style="margin-right: 1vw">
          <el-image
            style="width: 100px; height: 100px"
            :src="getImgUrl(author.avatar)"
            fit="fill"
          ></el-image>
        </div>
        <div v-if="author.username">作者：{{ author.username }}</div>
      </div>
    </div>
    <div style="flex: 3"></div>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.params);
    this.id = this.$route.params.id;
    this.getKnowledgeById();
  },
  data() {
    return {
      id: "",
      title: "",
      content: "",
      authorid: "", //作者id
      author: {}, //作者
    };
  },
  computed: {
    // parsedContent() {
    //   const segments = this.content.split("!@#");
    //   const parsedSegments = segments.map((segment) => {
    //     if (segment.startsWith("http")) {
    //       return { type: "image", url: segment };
    //     } else {
    //       return { type: "text", content: segment };
    //     }
    //   });
    //   return parsedSegments.filter((segment) => segment.content || segment.url);
    // },
  },
  methods: {
    getKnowledgeById() {
      this.$request.getHttp({
        url: "/knowledge/getKnowledgeById",
        params: {
          id: this.id,
        },
        success: (data) => {
          console.log(data);
          if (data.code == 200) {
            this.content = data.knowledge.content;
            this.title = data.knowledge.title;
            this.authorid = data.knowledge.authorid;
            this.getUserInfoById();
          }
        },
        error: (error) => {},
      });
    },
    getUserInfoById() {
      this.$request.getHttp({
        url: "/user/getUserInfoById",
        params: {
          userId: this.authorid,
        },
        success: (data) => {
          console.log(data);
          if (data.code == 200) {
            this.author = data.user;
          }
        },
        error: (error) => {},
      });
    },
    getImgUrl(name) {
      return this.$store.state.ipAddr + "/" + name;
    },
  },
};
</script>

<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.right-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 3vh;
}
</style>
